<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LOL heros</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul,li{
            list-style: none;
        }
        .info-showbox{
            padding: 30px 37px 30px 30px;
            position: relative;
            min-height: 500px;/*在页面上占据高度，让内部的内容慢慢
            加载进来，让页面打开更快，没有它，页面会撑一下，不美观*/
            _height:500px;/*兼容性 ie低版本不支持 min-height ie6*/
        }
        /* 布局 */
        .select-checkList{
            float: left;
            width: 70%;
            padding-top: 5px;
            /* background-color: green; */
        }
        .select-item{
            float: left;
            min-width: 60px;
            _width:60px;/*手机网站不需要考虑*/
            margin-right: 17px;
            position: relative;
        }
        .ms-radio{
            margin-right: 3px;
            /* span是行内元素 */
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 1px solid #b1b1b1;
            border-radius: 10px;
            cursor: pointer;
            position: relative;
        }
        .ms-radio .i{
            display: inline-block;
            position: absolute;
            top: 2px;
            left: 2px;
            width: 10px;
            height: 10px;
            background-color: #fff;
            cursor: pointer;
            border-radius: 10px;
        }
        .current .i{
            background-color: #00a383;
        }
        .search-box{
            width: 24%;
            float: right;
            height: 20px;
            /* background-color: blue; */
        }
        .imgtextlist{
            float: left;
            padding: 30px 0 0;
            position: relative;
        }
        .imgtextlist li{
            float: left;
            width: 90px;
            height: 100px;
            margin-bottom: 22px;
            text-align: center;
            line-height: 15px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .imgtextlist img{
            display: block;
            width: 66px;
            height: 65px;
            margin: 0 auto 7px;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear:both;
        }
    </style>
</head>
<body>
    <!-- 英雄选择 -->
    <div class="info-showbox">
    <div class="clearfix">
        <ul class="select-checkList">
            <li class="select-item current">
                <span class="ms-radio">
                    <i class="i"></i>
                </span>
                <label for="">所有英雄</label>
            </li>
            <li class="select-item">
                <span class="ms-radio">
                    <i class="i"></i>
                </span>
                <label for="">法师</label>
            </li>
            <li class="select-item">
                <span class="ms-radio">
                    <i class="i"></i>
                </span>
                <label for="">刺客</label>
            </li>
            <li class="select-item">
                <span class="ms-radio">
                    <i class="i"></i>
                </span>
                <label for="">战士</label>
            </li>
            <li class="select-item">
                <span class="ms-radio">
                    <i class="i"></i>
                </span>
                <label for="">射手</label>
            </li>
            <li class="select-item">
                <span class="ms-radio">
                    <i class="i"></i>
                </span>
                <label for="">辅助</label>
            </li>
        </ul>
        
        <div class="search-box">
        </div>
        </div>
        <!-- 先做一个静态的 -->
        <ul class="imgtextlist">
                <li>
                    <img src="../images/Aatrox.png" alt="">
                    <p>暗裔剑魔</p>
                </li>
            </ul>
    </div>
    <script>
        // const selectItem = document.querySelector('.select-item');
        // selectItem.addEventListener('click',function(){
        //     // console.log(this.classList);
        //     if(!this.classList.contains('current')){
        //         this.classList.remove('current')
        //     }
        // })
        const selectItems = document.querySelectorAll('.select-item');
        console.log(selectItems);
        selectItems.forEach(function(item){
            console.log(item);
            item.addEventListener('click',function(){
                document.querySelector('.current').classList.remove('current');
                item.classList.add('current');
            })
        })
    </script>
</body>
</html>